<template>
    <div class="common-layout">
        <el-container style="height: 100vh;">
            <!-- 头部 -->
            <el-header class="header">
                <div>学生宿舍管理系统</div>
                <!-- 下拉菜单 -->
                <!-- 头像 -->
                <div class="position">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <div class="demo-type">
                                <div>
                                    <el-avatar> 陆 </el-avatar>
                                </div>
                            </div>
                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a" @click="handleRegister">注销</el-dropdown-item>
                            </el-dropdown-menu>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a" @click="handleChangePassword">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>

                <!-- 侧边栏 -->
                <el-aside class="aside">
                    <ul>
                        <li>
                            <router-link to="/index" class="a active">首页</router-link>
                        </li>
                        <li>
                            <router-link to="/studentmanage" class="a">学生管理</router-link>
                        </li>
                        <li>
                            <router-link to="dormitorymanage" class="a">宿舍管理</router-link>
                        </li>
                        <li>
                            <router-link to="/livemanage" class="a">入住管理</router-link>
                        </li>
                        <li>
                            <router-link to="/floormanage" class="a">楼宇管理</router-link>
                        </li>
                    </ul>
                </el-aside>
                <el-container>
                    <el-main style="background-color:#fff;">
                        <div
                            style="border: 1px solid #fff;height: 70px;line-height: 70px; box-shadow: 1px 1px 10px #888;">
                            <div class="gradient-text">您好，管理员！欢迎使用本系统</div>
                        </div>
                        <div
                            style="border: 1px solid #fff;height: 230px; box-shadow: 1px 1px 10px #888;margin-top: 30px;">
                            <div style="margin-left: 30px;">
                                <h3 style="margin-top: 15px;">公告列表</h3>
                                <el-timeline style="max-width: 300px;text-align: left">
                                    <el-timeline-item v-for="(updatedActiviti, index) in updatedActivities" :key="index"
                                        :timestamp="updatedActiviti.timestamp">
                                        {{ updatedActiviti.content }}
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </el-main>
                    <!-- 版权 -->
                    <el-footer class="footer">
                        <span>© 2024 永恒帝宫. All rights reserved. </span>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { ArrowDown, Delete, Edit, Search } from '@element-plus/icons-vue'

const std = ref('')
const studentName = ref('')

const router = useRouter() // 获取路由实例  
function handleRegister() {
    // 使用 setTimeout 延迟 1 秒后跳转到登录页面  
    setTimeout(() => {
        router.push('/login')
    }, 1000) // 延迟 1000 毫秒（1 秒） 
    ElMessage(`退出登录成功`)
}

function handleChangePassword() {
    router.push('/changepassword')
}

const activities = [
    {
        content: '今天系统正式上线，开始内测',
        timestamp: '',
    },
    {
        content: '所有功能已完成，可以正常使用',
        timestamp: '',
    },
    {
        content: '欢迎您使用',
        timestamp: '',
    },
]

//显示当前日期
const updateTimestamps = (activities) => {
    const currentDate = new Date().toISOString().split('T')[0];
    return activities.map(activity => ({
        ...activity,
        timestamp: currentDate,
    }));
};

const updatedActivities = updateTimestamps(activities);
</script>

<style scoped>
body {
    background-color: transparent;
}

html,
body {
    /* 移除默认的边距和填充 */
    margin: 0;
    padding: 0;
    /* 确保页面高度至少与视口高度相同 */
    min-height: 100vh;
}


ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

li {
    list-style: none;
}

.header {
    position: relative;
    background-color: #683b9e;
    font-size: 35px;
    height: 80px;
    line-height: 80px;
    color: #f9f1fa;
}

.aside {
    width: 200px;
    background-color: #8eb1c4;
}

ul li .a {
    height: 60px;
    line-height: 60px;
    display: block;
    text-decoration: none;
    font-size: 20px;
    width: 100%;
    color: black;
}

ul li .active {
    background-color: #044a8083;
    color: white;
}

ul li .a:hover {
    color: white;
}

.unlogin {
    text-decoration: none;
    color: #888;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    position: relative;
    cursor: pointer;
    color: #fff
}

.el-dropdown-link div {
    display: inline-block;
    width: 40px;
    height: 40px;
}

.position {
    position: absolute;
    top: 23px;
    right: 30px;
}

.gradient-text {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    background-clip: text;
    color: transparent;
    margin-left: 30px;
}

.footer {
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(9, 218, 176, 0.404);
    color: #fff;
    border: 0;
}
</style>